import React, { useState, useEffect } from "react";
import {
	UNIQUECODE_STATUS,
	OUTBOUND_PRINT_STATUS,
	ASSOGM_PICKUP_TIME,
	OUTBOUND_ORDER_GOODS_COUNT_STATUS
} from "@/views/utils/constant";
import { Image, Tooltip, DatePicker, Popover, Button, Space } from "antd";
import CommonTableSort from "@/views/components/CommonTableSort";
import WarehouseSelect from "@/views/components/WarehouseSelect";
import SelectShopInputModal from "@/views/components/SelectShopInputModal";
import { Input, Select, BatchSuffixInput } from "@/views/components/PrefixPlaceholder";
import moment from "moment";
import SelectPurchaseTag from "./component/SelectPurchaseTag";
import TakeGoodsSelect from "@/views/components/TakeGoodsSelect";
import AreaCodeSelect from "@/pages/PurchaseModule/propose/components/Actions/AreaCodeSelect";
import CommonStoreSearchInput from "@/views/components/CommonStoreSearchInput/index";
const { RangePicker } = DatePicker;
const dateFormat = "YYYY-MM-DD HH:mm:ss";
import { NumText } from "@/pages/OrderModule/common/components/CommonText";
import IconFont from '@/components/IconFont';
const payMethMap = {
	6: "账期",
	1: "余额",
	7: "线下付款",
	9: "抵扣",
	100: "余额+抵扣"
};

export default ({
	handlePrint,
	handleTakeGoodsChange,
	fetchPage,
	refTimeSort,
	handleAreaValueChange,
	AreaValue,
	areaOption = [],
	takeGoods,
	handleWarehouseChange,
	selectedWarehouse,
	refundMethod,
	refundStatus,
	handleOpenOrderDetailVisible,
	code,
	handlePushSupplier,
	viewUniquecodeLog
}) => {
	const [valueData, setValueData] = useState({});

	//支付方式
	const payMethOptions = Object.keys(payMethMap).map(v => {
		return {
			label: payMethMap[v],
			value: v
		}
	})

	const defaultColumns = [
		{
			name: "序号",
			code: "index",
			lock: true,
			render: (t, r, i) => i + 1,
			width: 80
		},
		{
			name: "商品图片",
			code: "skuImage",
			render: value => <Image width={60} src={value} />,

			width: 100
		},
		{
			name: "商品唯一码",
			code: "code",
			search: {
				order: 7,
				code: "codes",
				content: () => (
					<BatchSuffixInput
						clearable
						allowClear
						autoMultiLine
						maxItem={500}
						modalProps={{
							title: "批量输入"
						}}
						placeholder="商品唯一码"
						message="分行输入内容，提交后主页面输入框会按照逗号自动隔开，点击查询可批量查询。"
						areaPlaceholder="每行输入1个内容，最多500个，例如:&#10;1272572508553111112223&#10;1272572512332111112226"
					/>
				)
			},
			width: 120
		},

		{
			name: "唯一码状态",
			code: "status",
			render: text => (
				<span>
					{text == "wait-pickup" && <span style={{ color: "rgba(255, 141, 26, 1)" }}>待拿货</span>}
					{text == "pickup-ing" && <span>拿货中</span>}
					{text == "wait-count" && <span>待清点</span>}
					{text == "wait-ship" && <span style={{ color: "rgba(0, 188, 117, 1)" }}>待发货</span>}
					{text == "picked-up" && <span style={{ color: "rgba(0, 188, 117, 1)" }}>已拿货</span>}
					{text == "shipped" && <span style={{ color: "rgba(0, 188, 117, 1)" }}>已发货</span>}
					{text == "cancelled" && <span style={{ color: "rgba(240, 61, 41, 1)" }}>已作废</span>}
					{text == "sales_return" && <span style={{ color: "rgba(240, 61, 41, 1)" }}>退货</span>}
				</span>
			),
			search: {
				order: 1,
				content: () => (
					<Select mode="tags" maxTagCount={1} defaultValue={code ? undefined : "wait-pickup"} allowClear placeholder="唯一码状态" options={UNIQUECODE_STATUS} />
				)
			},
			width: 100
		},
		{
			name: '推送状态',
			code: 'pushStatus',
			render: text => text ? '已推送' : '未推送',
			search: {
				order: 2,
				code: 'pushStatusList',
				content: () => (
					<Select
						mode="tags"
						maxTagCount={1}
						allowClear
						placeholder="推送状态"
						options={[
							{ label: '未推送', value: 0 },
							{ label: '已推送', value: 1 },
						]}
					/>
				)
			},
			width: 100
		},
		{
			name: "商品编码",
			code: "skuCode",
			render: (text, record, i) => (
				<div className="common-color2">
					<Tooltip
						placement="bottom"
						color={"#fff"}
						overlayStyle={{ minWidth: "380px", overflow: "auto" }}
						title={
							<>
								<div className="flex">
									<div style={{ marginRight: "10px" }}>
										<Image width={60} height={60} src={record.skuImage}></Image>
									</div>
									<div style={{ color: "#333" }}>
										<div>{record.skuName}</div>
										<div style={{ color: "rgba(102, 102, 102, 1)" }}>款式编码:{record.spuCode}</div>
										<div style={{ color: "rgba(102, 102, 102, 1)" }}>商品编码:{record.skuCode}</div>
									</div>
								</div>
							</>
						}
					>
						{text}
					</Tooltip>
				</div>
			),
			search: {
				order: 50,
				content: () => <Input allowClear placeholder="商品编码" />
			},
			width: 200
		},
		{
			name: "款式编码",
			code: "spuCode",
			render: (text, record, i) => (
				<div className="common-color2">
					<Tooltip
						placement="bottom"
						color={"#fff"}
						overlayStyle={{ minWidth: "380px", overflow: "auto" }}
						title={
							<>
								<div className="flex">
									<div style={{ marginRight: "10px" }}>
										<Image width={60} height={60} src={record.skuImage}></Image>
									</div>
									<div style={{ color: "#333" }}>
										<div>{record.skuName}</div>
										<div style={{ color: "rgba(102, 102, 102, 1)" }}>款式编码:{record.spuCode}</div>
										<div style={{ color: "rgba(102, 102, 102, 1)" }}>商品编码:{record.skuCode}</div>
									</div>
								</div>
							</>
						}
					>
						{text}
					</Tooltip>
				</div>
			),
			width: 200
		},
		{
			name: '来源系统单号',
			title: () => <>
				<span>来源系统单号</span>
				<Popover content={<div style={{ width: '300px' }}>唯一码生成时绑定的系统订单号；唯一码配置：关闭订单和唯一码绑定时，来源和发货的系统单号可能不同</div>} placement="topLeft" trigger="hover">
					<span style={{ textIndent: '6px', cursor: 'pointer' }}><IconFont type='iconwenhao1' /></span>
				</Popover>
			</>,
			code: "systemNo",
			search: {
				order: 3,
				code: "sourceSystemNo",
				content: () => (
					<BatchSuffixInput
						clearable
						allowClear
						autoMultiLine
						maxItem={500}
						modalProps={{
							title: "批量输入"
						}}
						placeholder="来源系统单号"
						message="分行输入内容，提交后主页面输入框会按照逗号自动隔开，点击查询可批量查询。"
						areaPlaceholder="每行输入1个内容，最多500个，例如:&#10;1272572508553111112223&#10;1272572512332111112226"
					/>
				)
			},
			width: 220,
			render: (_, record) => (
				<Button type="link"
					onClick={() => {
						handleOpenOrderDetailVisible(record);
					}}
				>
					{record.systemNo}
				</Button>
			),
		},
		{
			name: '来源出库单号',
			title: () => <>
				<span>来源出库单号</span>
				<Popover content={<div style={{ width: '300px' }}>唯一码生成时绑定的出库单号；唯一码配置：关闭订单和唯一码绑定时，来源和发货的出库单号可能不同</div>} placement="topLeft" trigger="hover">
					<span style={{ textIndent: '6px', cursor: 'pointer' }}><IconFont type='iconwenhao1' /></span>
				</Popover>
			</>,
			code: "outboundNo",
			search: {
				order: 4,
				content: () => (
					<BatchSuffixInput
						clearable
						allowClear
						autoMultiLine
						maxItem={500}
						modalProps={{
							title: "批量输入"
						}}
						placeholder="来源出库单号"
						message="分行输入内容，提交后主页面输入框会按照逗号自动隔开，点击查询可批量查询。"
						areaPlaceholder="每行输入1个内容，最多500个，例如:&#10;1272572508553111112223&#10;1272572512332111112226"
					/>
				)
			},
			width: 220,
		},
		{
			title: () => <>
				<span>发货系统单号</span>
				<Popover content={<div style={{ width: '300px' }}>唯一码发货时绑定的系统订单号；唯一码配置：关闭订单和唯一码绑定时，来源和发货的系统单号可能不同</div>} placement="topLeft" trigger="hover">
					<span style={{ textIndent: '6px', cursor: 'pointer' }}><IconFont type='iconwenhao1' /></span>
				</Popover>
			</>,
			name: '发货系统单号',
			code: "deliverySystemNo",
			width: 200,
			search: {
				order: 5,
				content: () => (
					<BatchSuffixInput
						clearable
						allowClear
						autoMultiLine
						maxItem={500}
						modalProps={{
							title: "批量输入"
						}}
						placeholder="发货系统单号"
						message="分行输入内容，提交后主页面输入框会按照逗号自动隔开，点击查询可批量查询。"
						areaPlaceholder="每行输入1个内容，最多500个，例如:&#10;1272572508553111112223&#10;1272572512332111112226"
					/>
				)
			},
			render: (_, record) => (
				<Button type="link"
					onClick={() => {
						handleOpenOrderDetailVisible(record);
					}}
				>
					{record.deliverySystemNo}
				</Button>
			),
		},
		{
			name: '发货出库单号',
			title: () => <>
				<span>发货出库单号</span>
				<Popover content={<div style={{ width: '300px' }}>唯一码发货时绑定的出库单号；唯一码配置：关闭订单和唯一码绑定时，来源和发货的出库单号可能不同</div>} placement="topLeft" trigger="hover">
					<span style={{ textIndent: '6px', cursor: 'pointer' }}><IconFont type='iconwenhao1' /></span>
				</Popover>
			</>,
			code: "deliveryOutboundNo",
			search: {
				order: 6,
				content: () => (
					<BatchSuffixInput
						clearable
						allowClear
						autoMultiLine
						maxItem={500}
						modalProps={{
							title: "批量输入"
						}}
						placeholder="发货出库单号"
						message="分行输入内容，提交后主页面输入框会按照逗号自动隔开，点击查询可批量查询。"
						areaPlaceholder="每行输入1个内容，最多500个，例如:&#10;1272572508553111112223&#10;1272572512332111112226"
					/>
				)
			},
			width: 220,
		},
		{
			name: "商品标签",
			code: "type",
			render: (text, record) => (
				<span>
					<span>{text == 1 && <span style={{ background: " rgba(0, 104, 255, 1)", color: "#fff", padding: 5 }}>库存</span>}</span>
					<span>
						{(text == 3 || text == 2) && (
							<span style={{ background: "rgba(0, 188, 117, 1)", color: "#fff", padding: 5 }}>采购</span>
						)}
					</span>
					<span>{text == 3 && <span style={{ background: "rgba(240, 61, 41, 1)", color: "#fff", padding: 5 }}>销退</span>}</span>
					<span>
						{record.excType == 0 && record.excType !== "" && (
							<span style={{ background: " rgba(240, 61, 41, 1)", color: "#fff", padding: 5 }}>异常</span>
						)}
					</span>
					<span>
						{record.excType == 1 && (
							<span style={{ background: " rgba(240, 61, 41, 1)", color: "#fff", padding: 5 }}>
								{/* <span style={{ width: "50px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
									{record.excMsg && <span>{record.excMsg.substring(0, 4) + "..."}</span>}
									{!record.excMsg && <span>其他原因</span>}
								</span> */}
								{record.excMsg ? record.excMsg : '其他原因'}
							</span>
						)}
					</span>
					<span>
						{(record.excType == 2 || record.excType == 3 || record.excType == 4) && (
							<span style={{ background: "rgba(240, 61, 41, 1)", color: "#fff", padding: 5 }}>
								<span style={{ marginRight: 5 }}>到货</span>
								<span>{moment(Number(record.excTime)).format("MM.DD")}</span>
							</span>
						)}
					</span>
					<span>
						{record.excType == 5 && (
							<span style={{ background: "rgba(240, 61, 41, 1)", color: "#fff", padding: 5 }}>不知何时有货</span>
						)}
					</span>
					<span>
						{record.excType == 6 && <span style={{ background: "rgba(240, 61, 41, 1)", color: "#fff", padding: 5 }}>下架</span>}
					</span>
					<span>
						{record.excType == 7 && (
							<span style={{ background: "rgba(240, 61, 41, 1)", color: "#fff", padding: 5 }}>门店未开门</span>
						)}
					</span>
				</span>
			),
			search: {
				order: 90,
				code: "orderLabelIdList",
				content: () => (
					<SelectPurchaseTag
						onChange={data => {
							setValueData(data);
						}}
					/>
				)
			},
			width: 250
		},
		{
			name: "拿货员",
			code: "pickerName",

			search: {
				order: 70,
				span: 3,
				code: "pickerName",
				content: () => {
					return <TakeGoodsSelect value={takeGoods} params={{ businessType: 3 }} onChange={handleTakeGoodsChange} />;
				}
			},
			width: 150
		},
		{
			name: "异常标记时间",
			code: "markExcTime",
			width: 200,
			render: text => (text ? <div>{moment(Number(text)).format("YYYY-MM-DD HH:mm:ss")}</div> : "")
		},
		{
			name: "拿货金额",
			code: "payPrice",
			render: value => value && <NumText as="s1" pre="¥" num={value} />,
			search: {
				order: 32,
				code: "pickerAmount",
				content: () => <Input allowClear placeholder="拿货金额" />
			},
			width: 100
		},
		{
			name: "区域编码",
			code: "supplierAreaName",
			search: {
				order: 80,
				code: "areaCode",
				content: () => (
					<AreaCodeSelect
						origin="true"
						size="middle"
						placeholder="区域编码"
						mode="multiple"
						options={areaOption.current}
						showArrow={false}
						maxTagCount={1}
						style={{ lineHeight: "22px" }}
					/>
				)
			},
			width: 100
		},
		{
			name: "是否打印",
			code: "print",
			render: text => (text == 1 ? "已打印" : "未打印"),
			search: {
				order: 130,
				code: "print",
				content: () => <Select allowClear placeholder="是否打印" options={OUTBOUND_PRINT_STATUS} />
			},
			width: 200
		},
		{
			name: "指派拿货时间",
			code: "assignedPickupTime",
			render: text => (text ? <div>{moment(Number(text)).format("YYYY-MM-DD HH:mm:ss")}</div> : ""),
			search: {
				order: 180,
				span: 6,
				group: [
					{
						span: 6,
						code: "timeType",
						content: () => (
							<Select
								origin={origin}
								defaultValue={3}
								allowClear
								placeholder="指派拿货时间"
								options={ASSOGM_PICKUP_TIME}
								className="width-full"
							/>
						)
					},
					{
						span: 18,
						keys: ["createTimeStart", "createTimeEnd"],
						code: "times",
						content: () => <RangePicker format={dateFormat} showTime placeholder={["开始时间", "结束时间"]} />
					}
				]
			},

			width: 200
		},

		{
			name: "拿货完成时间",
			code: "pickupCompletionTime",
			render: text => (text ? <div>{moment(Number(text)).format("YYYY-MM-DD HH:mm:ss")}</div> : ""),
			search: {
				code: "type",
				order: 150,
				content: () => <Select allowClear placeholder="订单商品数量" options={OUTBOUND_ORDER_GOODS_COUNT_STATUS} />
			},
			width: 200
		},
		{
			name: "分拣墙",
			code: "sortingWallName",
			width: 100
		},
		{
			name: "分拣框",
			code: "sortingBoxName",
			search: {
				code: "assign",
				order: 120,
				content: () => (
					<Select
						allowClear
						placeholder="拿货员指派"
						options={[
							{
								value: "1",
								label: "已指派拿货员"
							},
							{
								value: "2",
								label: "未指派拿货员"
							}
						]}
					/>
				)
			},
			width: 100
		},
		{
			name: "创建时间",
			title: () => (
				<CommonTableSort
					value={refTimeSort}
					title={"创建时间"}
					onClick={order => {
						refTimeSort.current = order;
						fetchPage();
					}}
				/>
			),
			code: "createTime",
			width: 200,
			render: text => (text ? <div>{moment(text).format("YYYY-MM-DD HH:mm:ss")}</div> : "")
		},
		{
			name: "供应商",
			code: "supplierName",
			render: (text, record) => (
				<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
					{text}
					{record.hasPrinter && <IconFont type="icona-lujing111"/>}
				</div>
			),
			search: {
				code: "supplier",
				order: 100,
				content: () => <CommonStoreSearchInput type="storeName" valueKey="storeName" placeholder="供应商名称" />
			},
			width: 100
		},
		{
			name: "卖家店铺",
			code: "shop",
			width: 200,
			search: {
				code: "sellerShopId",
				order: 170,
				content: form => <SelectShopInputModal multiple={true} placeholder="选择平台/店铺" />
			}
		},
		{
			name: "档口号",
			code: "gateNo",
			search: {
				order: 110,
				content: () => (
					<CommonStoreSearchInput
						type="storeName"
						valueKey="storeName"
						apiKey="getZJFshopCodePage"
						size="middle"
						placeholder="档口号"
					/>
				)
			},
			width: 100
		},
		{
			name: "所属仓库",
			code: "warehouseName",
			search: {
				order: 180,
				code: "warehouse",
				content: () => {
					return <WarehouseSelect value={selectedWarehouse} placeholder={"所属仓库"} onChange={handleWarehouseChange} />;
				}
			},
			width: 100
		},
		{
			name: "供应商是否安装打印机",
			code: "hasPrinter",
			hidden: true,
			search: {
				order: 190,
				code: "hasPrinter",
				content: () => <Select 
					allowClear 
					placeholder="供应商是否安装打印机"
					options={[
						{ label: '是', value: 1 },
						{ label: '否', value: 0 },
					]} 
				/>
			},
			width: 200
		},
		{
			name: '付款支付方式',
			code: "payMeth",
			search: {
				order: 81,
				code: "payMeths",
				content: () => <Select mode="tags" maxTagCount={1} allowClear placeholder="付款支付方式" options={payMethOptions} />
			},
			width: 120,
			render: text => payMethMap[text]
		},
		{
			name: '账单流水号',
			code: "tradeNos",
			search: {
				order: 190,
				code: "tradeNos",
				content: () => <BatchSuffixInput
				clearable
				allowClear
				autoMultiLine
				maxItem={500}
				modalProps={{
					title: "批量输入"
				}}
				placeholder="账单流水号"
				message="分行输入内容，提交后主页面输入框会按照逗号自动隔开，点击查询可批量查询。"
				areaPlaceholder="每行输入1个内容，最多500个，例如:&#10;1272572508553111112223&#10;1272572512332111112226"
			/>
			},
			width: 160,
			render: (_, record) => (
			 <div>
				<div>{record.tradeNo}</div>
				<div>{record.payTime ? moment(Number(record.payTime)).format(dateFormat) : null}</div>
			 </div>
			),
		},
		{
			name: "操作",
			code: "action",
			lock: true,
			render: (text, record) => (
				<Space direction="vertical">
					<span className="common-color2" onClick={() => handlePrint(record)}>
						打印唯一码
					</span>
					{record.status == 'wait-pickup' && (
						<span 
							className="common-color2" 
							onClick={() => handlePushSupplier(record)}
						>
							推送供应商
						</span>
					)}
					<span className="common-color2" onClick={() => viewUniquecodeLog(record)}>
						日志
					</span>
				</Space>
			),
			width: 100
		},
	];
	return { defaultColumns, valueData };
};
